<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>模板语法</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id="app">
    <span>Message:{{ msg }}</span>
    <br/>
    <!--v-once指令，一次性插值，当数据改变时，插值处的内容不会更新-->
    <span v-once>Message:{{ msg }}</span>
    <br/>
    <!--v-html指令，输出原始HTML-->
    <span v-html="rawHtml"></span>
    <br/>
    <!--v-bind指令，将button元素的disabled属性与isButtonDisabled绑定起来-->
    <button v-bind:disabled="isButtonDisabled">Button</button>
    <br/>
    <div>
        {{ number + 1}}
        <br/>
        {{ok ? 'YES' : 'NO'}}
        <br/>
        {{msg.split('').reverse().join('')}}
        <div v-bind:id="'list-'+id"></div>
    </div>
</div>

<div id="app2">
    <!--v-if 指令将根据表达式seen 的值的真假来插入/移除 <p> 元素。-->
    <p v-if="seen">现在你看到我了</p>
    <!--一些指令能够接收一个“参数”，在指令名称之后以冒号表示。v-bind 指令可以用于响应式地更新 HTML 特性-->
    <a v-bind:href="url">百度</a>
    <!--v-on 指令，它用于监听 DOM 事件-->
    <a v-on:click="doSomething">...</a>
    <!--动态参数-->
    <a v-bind:[attributename]="url">...</a>
    <button v-on:[eventname]="doSomething">点我一下</button>
    <!--修饰符(modifier)是以半角号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。-->
    <form v-on:submit.prevent="onSubmit">...</form>
    <!--缩写-->
    <!--v-bind缩写-->
    <a v-bind:href="url">...</a><!--完整语法-->
    <a :href="url">...</a><!--缩写语法-->
    <!--v-on缩写-->
    <a v-on:click="doSomething">v-on完整</a><!--完整语法-->
    <a @click="doSomething">v-on缩写</a><!--缩写语法-->
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data: {
            msg:'Hello Vue!',
            rawHtml:'<p style="color: green">Hello,World</p>',
            isButtonDisabled:true,
            number:10,
            ok:false,
            id:'first'
        }
    });

    var vm2 = new Vue({
        el:'#app2',
        data: {
            seen:true,
            url:'www.baidu.com',
            attributename:'href',
            eventname:'click'
        },
        methods:{
            doSomething:function () {
                alert("你点击我了");
            }
        }
    })
</script>
</html>